<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo--入门02</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
	#div1{
		
	}


</style>
</head>
<body>

	<div id="div1"><em>em</em>#div1</div>
	<span>span</span>


<script type="text/javascript">

$(function(){

	//$("span").insertBefore($("#div1"))//将span插入到#div1的前面
	
	//$("div").insertAfter($("span"))//将div插入到span的后面
	
	//将span作为子节点插入到div之中（插入顺序为尾部）
	//$('span').appendTo($('div'))
	
	//将span作为子节点插入到div之中（插入顺序为首位）
	//$('span').prependTo($('div'))

	//$('#div1').remove()//删除元素

	//#div1的前面是span，dom元素有span就会调用，没有span就会忽略这个方法
	//$("#div1").before($("span"))


// 在链式操作时，before()和insertBefore()是不同的，（选择的主体不同,选择的主体可以记住	为第一个选中的元素就是操作的主体）
	//此时操作的主体是span元素，所以span的背景变红色
	//$("span").insertBefore($("div")).css('background','red')

	//此时操作的元素是div元素，所以div的背景变红色
	//$("div").before($("span")).css('background','red')


})



</script>


</body>
</html>